<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
      <!-- Typography CSS -->
      <link rel="stylesheet" th:href="@{/css/typography.css}">
      <!-- Style CSS -->
      <link rel="stylesheet" th:href="@{/css/style.css}">
      <!-- Responsive CSS -->
      <link rel="stylesheet" th:href="@{/css/responsive.css}">
   </head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
         <!-- Sidebar  引入公共列表-->
         <div th:include="public::list" class="iq-sidebar"></div>
         <!-- Responsive Breadcrumb End-->
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar  引入公共头部-->
            <div th:include="public::top" class="iq-top-navbar"></div>

            <!-- TOP Nav Bar END  展示编写区域-->
            <div class="container-fluid">
               <div class="row">
                  <div class="col-lg-12">
                     <div class="row">
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-primary rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-primary"><i class="ri-user-fill"></i></div>
                                    <div class="text-right">                                 
                                       <h2 class="mb-0"><span class="counter" th:text="${session.vol1}"></span></h2>
                                       <h5 class="">用户</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-warning rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-warning"><i class="ri-women-fill"></i></div>
                                    <div class="text-right">                                 
                                       <h2 class="mb-0"><span class="counter" th:text="${session.vol2}"></span></h2>
                                       <h5 class="">普通志愿者</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-danger rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-danger"><i class="ri-group-fill"></i></div>
                                    <div class="text-right">                                 
                                       <h2 class="mb-0"><span class="counter" th:text="${session.vol3}"></span></h2>
                                       <h5 class="">党员志愿者</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-info rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-info"><i class="ri-hospital-line"></i></div>
                                    <div class="text-right">                                 
                                       <h2 class="mb-0"><span class="counter" th:text="${session.volNum}"></span></h2>
                                       <h5 class="">完成志愿服务总数</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                 <div class="col-sm-12">
                    <div class="iq-card">
                     <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                           <h4 class="card-title">Volunteer Survey</h4>
                        </div>
                     </div>
                       <div class="iq-card-body pb-0 mt-3">
                          <div class="row text-center">
                               <div class="col-sm-3 col-6">
                                   <h4 class="margin-0">$ 305 </h4>
                                   <p class="text-muted"> Today's Income</p>
                               </div>
                               <div class="col-sm-3 col-6">
                                   <h4 class="margin-0">$ 999 </h4>
                                   <p class="text-muted">This Week's Income</p>
                               </div>
                               <div class="col-sm-3 col-6">
                                   <h4 class="margin-0">$ 4999 </h4>
                                   <p class="text-muted">This Month's Income</p>
                               </div>
                               <div class="col-sm-3 col-6">
                                   <h4 class="margin-0">$ 90,000 </h4>
                                   <p class="text-muted">This Year's Income</p>
                               </div>
                           </div>
                       </div>
                        <!-- fixme: 图标应用？ -->
                        <div id="home-servey-chart"></div>
                    </div>
                  </div>
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Volunteer Staff</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <ul id="doster-list-slide" class="d-flex flex-wrap align-items-center p-0">
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/05.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>Doctor</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/06.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>Nurse</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/07.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>Surgeon</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/08.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>Doctor</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/09.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>Surgeon</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="docter-list-item col-md-3 text-center p-2">
                                 <div class="docter-list-item-inner rounded">
                                    <div class="donter-profile">
                                       <img th:src="@{/images/user/10.jpg}" class="img-fluid rounded-circle" alt="user-img">
                                    </div>
                                    <div class="doctor-detail mt-3">
                                       <h5>Dr. Paul Molive</h5>
                                       <h6>OT Assistent</h6>
                                    </div>
                                    <hr>
                                    <div class="doctor-description">
                                       <p class="mb-0 text-center pl-2 pr-2">California Hospital Medical Center</p>
                                    </div>
                                 </div>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               
               </div>
            </div>

            <!-- Footer  引入公共尾部-->
            <footer th:include="public::footer" class="bg-white iq-footer"></footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   
      <script th:src="@{/js/jquery.min.js}"></script>
      <script th:src="@{/js/popper.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/js/waypoints.min.js}"></script>
      <script th:src="@{/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/js/lottie.js}"></script>
      <!-- am core JavaScript -->
      <script th:src="@{/js/core.js}"></script>
      <!-- am charts JavaScript -->
      <script th:src="@{/js/charts.js}"></script>
      <!-- am animated JavaScript -->
      <script th:src="@{/js/animated.js}"></script>
      <!-- am kelly JavaScript -->
      <script th:src="@{/js/kelly.js}"></script>
      <!-- Flatpicker Js -->
      <script th:src="@{https://cdn.jsdelivr.net/npm/flatpickr}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/js/custom.js}"></script>
      <script>
         jQuery("#home-servey-chart").length && am4core.ready(function() {
            var options = {
               series: [{
                  name: 'Cash Flow',
                  data: [1.45, 35.42, 5.9, -0.42, -12.6, -58.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
                     5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
                             48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
                  ]
               }],
               chart: {
                  type: 'bar',
                  height: 350
               },
               plotOptions: {
                  bar: {
                     colors: {
                        ranges: [{
                           from: -100,
                           to: -46,
                           color: '#e64141'
                        }, {
                           from: -45,
                           to: 0,
                           color: '#089bab'
                        }, {
                           from: 0,
                           to: 20,
                           color: '#FC9F5B'
                        }]
                     },
                     columnWidth: '80%',
                  }
               },
               dataLabels: {
                  enabled: false,
               },
               yaxis: {
                  title: {
                     text: 'Growth',
                  },
                  labels: {
                     formatter: function (y) {
                        return y.toFixed(0) + "%";
                     }
                  }
               },
               xaxis: {
                  type: 'datetime',
                  categories: [
                     '2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
                     '2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
                     '2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
                     '2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
                     '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
                     '2013-07-01', '2013-08-01', '2013-09-01'
                  ],
                  labels: {
                     rotate: -90
                  }
               }
            };

            var chart = new ApexCharts(document.querySelector("#home-servey-chart"), options);
            chart.render();
         });
      </script>
   </body>
</html>